import { assignVars } from '@vanilla-extract/css';
import { vars } from '../vars.css';

export const lightColor = {
	color: {
		accent: 'hsl(213, 73%, 50%)',
		success: 'hsl(105, 59%, 50%)',
		danger: 'hsl(6, 75%, 50%)',
		warning: 'hsl(37, 73%, 50%)',
		text: 'hsl(0,0%,20%)',
		buttonText: 'hsl(0,0%,100%)',
		emphasizeText: 'hsl(0, 0%, 0%)',
		secondaryText: 'hsl(0, 0%, 40%)',
		placeholderText: 'hsl(0, 0%, 50%)',
		disabledText: 'hsl(0, 0%, 80%)',
		border: 'hsl(0, 0%, 70%)',
		windowBackground: 'hsl(0, 0%, 97%)',
		panelBackground: 'hsl(0, 0%, 100%)',
		selection: 'hsl(213, 73%, 80%)',
		selectionBlur: 'hsl(0, 0%, 93%)',
		toastBackground: 'hsl(0, 0%, 0%)',
		shadow: '#0002',
		mask: '#0007',
	},
	empty: {
		color: {
			0: '#ffffff',
			1: '#D5DAE5',
			2: '#DCDEE0',
			3: '#EAEDF1',
			4: '#F7F8FA',
		},
	},
};

export const lightColorTheme = {
	vars: assignVars(vars, {
		color: lightColor.color,
		font: {
			family: 'Microsoft YaHei',
			baseSize: '14px',
		},
		empty: lightColor.empty,
		layout: {
			smallRadius: '4px',
			middleRadius: '8px',
			largeRadius: '16px',
			inputHeight: '2.6em',
		},
	}),
	colorScheme: 'light dark',
	color: vars.color.text,
	backgroundColor: vars.color.windowBackground,
	fontSize: vars.font.baseSize,
	fill: vars.color.text,
};
